<template>
  <div id="invoice-info">
    <div class="invoice-info">
      <div class="invoice-info-header">
        <p>发票抬头</p>
        <div class="add-invoice primary" @click="handleAdd">添加发票</div>
        <el-dialog
          title="添加发票抬头"
          :visible.sync="$store.state.login.dialogAddInvoice"
          :close-on-click-modal="false"
          :lock-scroll="false"
        >
          <AddInvoice v-if="$store.state.login.dialogAddInvoice" @getInvoice="getInvoiceList"></AddInvoice>
        </el-dialog>
      </div>
      <el-table :data="tableData" :row-class-name="tableRowClassName">
        <el-table-column label="发票抬头">
          <!-- min-width="220" -->
          <template slot-scope="scope">
            <div v-if="scope.row.taxType == '0'" class="rise">
              <span class="putong icon">普</span>
              <span class="dianzi icon" v-if="scope.row.makeType == '1'">电</span>
              <span class="zhi icon" v-if="scope.row.makeType == '0'">纸</span>
              <span v-if="scope.row.customType == '0'">{{scope.row.rise}}</span>
              <span v-if="scope.row.customType == '1'">{{scope.row.rise}}</span>
            </div>
            <!-- <div v-else class="rise">
                            <span class="zhuan icon">专</span>
                            <span>{{scope.row.rise}}</span>
            </div>-->
          </template>
        </el-table-column>
        <el-table-column prop="number" label="纳税人识别号">
          <!-- width="132" -->
        </el-table-column>
        
        <el-table-column label="邮箱">
          <!-- width="155" -->
          <template slot-scope="scope">
            <span>{{scope.row.email}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- width="115" -->
          <template slot-scope="scope">
            <div class="edit" @click.stop="handleModify(scope.row)">编辑</div>
            <el-dialog
              title="修改发票抬头"
              :visible.sync="$store.state.login.dialogModifyInvoice"
              :close-on-click-modal="false"
              :lock-scroll="false"
            >
              <ModifyInvoice
                v-if="$store.state.login.dialogModifyInvoice"
                @getInvoice="getInvoiceList"
                :id="InvoiceId"
              ></ModifyInvoice>
            </el-dialog>
            <div class="delete" @click="handleDelete(scope.row.id,scope.$index)">删除</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import AddInvoice from "@/components/personal/invoice/AddInvoice.vue";
import ModifyInvoice from "@/components/personal/invoice/ModifyInvoice.vue";
export default {
  data() {
    return {
      tableData: [],
      InvoiceId: ""
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      }
      return "";
    },
    // 获取发票列表
    getInvoiceList() {
      var formData = new FormData();
      formData.append("TeamNum", localStorage["teamNum"]);
      formData.append("pageSize", 12);
      formData.append("pageIndex", 0);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$axios.post("/TeamInvoices", formData, config).then(res => {
        console.log(JSON.parse(res.data));
        var data = JSON.parse(res.data).Data;
        var list = [];
        for (var i = 0; i < data.length; i++) {
          var obj = {};
          obj.makeType = data[i].MakeType;
          obj.taxType = data[i].TaxpayerType;
          obj.customType = data[i].CustomerType;
          obj.rise = data[i].InvoiceTitle;
          obj.number = data[i].RegisterNo;
          obj.address = "";
          obj.phone = data[i].Phone;
          obj.bank = data[i].Bank;
          obj.account = data[i].BankNo;
          obj.email = data[i].Email;
          obj.id = data[i].Id;
          list[i] = obj;
        }
        this.tableData = list;
      });
    },

    // 删除发票
    handleDelete(id, i) {
      this.$confirm("是否删除该发票?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        lockScroll: false
      })
        .then(() => {
          var formData = new FormData();
          formData.append("Id", id);
          let config = {
            headers: { "Content-Type": "multipart/form-data" }
          };
          this.$axios
            .delete("/TeamInvoice", { data: formData }, config)
            .then(res => {
              //console.log(res)
              if (res.data == true) {
                this.$message({ type: "success", message: "删除成功" });
                this.tableData.splice(i, 1);
                //this.page.totalRecords = this.page.totalRecords - 1
              } else {
                this.$message({ type: "error", message: "删除失败" });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除"
          });
        });
    },

    // 打开添加发票弹出框
    handleAdd() {
      this.$store.commit("login/setDialogAddInvoice", true);
    },
    handleModify(row) {
      this.InvoiceId = row.id;
      this.$store.commit("login/setDialogModifyInvoice", true);
    }
  },
  mounted() {
    this.$setTheme(this.$store);
    this.getInvoiceList();
  },
  components: {
    AddInvoice,
    ModifyInvoice
  }
};
</script>

<style lang="less" scoped>
#invoice-info {
  width: 100%;
  padding: 45px 63px;
  user-select: none;
}
.invoice-info {
  min-width: 1200px;
  margin: 0 auto;
  .invoice-info-header {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px 1px rgba(203, 211, 217, 0.3);
    border-radius: 10px;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    padding: 17px 28px 17px 21px;
    font-size: 18px;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 37px;
    .add-invoice {
      border-radius: 21px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      width: 109px;
      font-size: 16px;
      cursor: pointer;
    }
  }
  .el-table {
    box-shadow: 0px 0px 20px 1px rgba(203, 211, 217, 0.3);
    border-radius: 10px;
    .edit {
      text-align: center;
      line-height: 34px;
      height: 34px;
      width: 82px;
      border: 1px solid rgba(210, 210, 210, 1);
      border-radius: 5px;
      color: rgba(51, 51, 51, 1);
      cursor: pointer;
      margin: 0 auto 10px;
    }
    .delete {
      text-align: center;
      line-height: 34px;
      height: 34px;
      width: 82px;
      background: rgba(255, 87, 87, 1);
      border-radius: 5px;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
      margin: 0 auto;
    }
    .regaddress {
      line-height: 30px;
      width: 235px;
      margin: 0 auto;
      text-align: left;
    }
  }
}
.invoice-info /deep/ .el-table td:last-child .cell {
  padding: 15px 17px;
}
.invoice-info /deep/ .el-table {
  .cell {
    text-align: center;
  }
}
.invoice-info /deep/ .el-table td {
  padding: 0;
  .cell {
    padding: 15px 0;
    .rise .icon {
      display: inline-block;
      width: 22px;
      height: 22px;
    }
    .putong {
      background: rgba(51, 151, 230, 1);
      border-radius: 2px;
      color: rgba(255, 255, 255, 1);
      margin-right: 10px;
    }
    .zhi {
      background: rgba(243, 152, 0, 1);
      border-radius: 2px;
      color: rgba(255, 255, 255, 1);
      margin-right: 23px;
    }
    .rise {
      display: flex;
      padding-left: 25px;
      line-height: 22px;
    }
    .dianzi {
      margin-right: 23px;
      color: rgba(255, 255, 255, 1);
      border-radius: 2px;
      background: rgba(17, 177, 96, 1);
    }
    .zhuan {
      margin-right: 23px;
      margin-left: 32px;
      color: rgba(255, 255, 255, 1);
      border-radius: 2px;
      background: rgba(255, 87, 87, 1);
    }
  }
}

.invoice-info /deep/ .el-dialog {
  width: 630px;
  border-radius: 10px;
  text-align: center;
  box-shadow: none;
  .el-dialog__header {
    padding: 20px 25px 0;
    line-height: 21px;
    font-size: 23px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    position: relative;
    .el-dialog__headerbtn {
      position: absolute;
      top: 17px;
      right: -45px;
      .el-dialog__close {
        width: 24px;
        height: 24px;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
